<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <li v-for="item in names" :key="item">{{item}}</li>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      names:['A','B','C','D','E','F']
    },
    methods:{
      btnClick(){//push和unshift都可以一次添加多个元素
        //1.push方法
        this.names.push('asd')
        //2.pop方法 删除数组中的最后一个元素
        this.names.pop()
        //3.shift() 删除数组中的第一个元素
        this.names.shift()
        //4.unshift() 在第一个位置添加元素
        this.names.unshift('asdasd')
        //5.splice() 第一个参数是插入的位置(索引位置) 第二个位置为删除的元素个数(从第一个参数位置开始)  第三个参数为插入的元素
            //删除元素/插入元素/修改元素
        this.names.splice(1) //删除1位置后面的所有元素
        this.names.splice(1,1) //删除1位置后面的一个元素
        this.names.splice(2,0,'adasc') //在2位置后添加元素
        this.names.splice(1,3,'a','q','w') //在1位置后替换三个元素
        //6.sort()
        this.names.sort() //排序
        //7.reverse()
        this.names.reverse() //反转

        //注意：通过索引值修改数组元素(不是响应式的)不建议使用
        // this.names[0]='asda';

        //set(要修改的对象，索引值，修改后的值)
        Vue.set(this.names,1,'asd')
      }
    }
  })
</script>

</body>
</html>